<template>
	<view>
		<!-- 视频 -->
		<view v-if="!isPlay" class="yz-box" :style="{height: height}">
			<u--image radius="10rpx" mode="aspectFill" :src="cover" width="100%" :height="height"></u--image>
			<text @click="play" class="play-class iconfont icon-24gl-playCircle"></text>
		</view>
		<video v-else class="yz-box"objectFit="cover" :style="{width: '100%', height: height, display: 'block'}"
			:src="playInfo.url" controls autoplay loop :show-center-play-btn="false">
		</video>
	</view>
</template>

<script>
	export default {
		name: 'JoyVideo',
		props: {
			playInfo: {
				type: Object,
				required: true,
				default: function() {
					return {}
				}
			},
			height: {
				type: String,
				default: '386rpx'
			},
		},
		data() {
			return {
				isPlay: false,
			}
		},
		computed: {
			cover() {
				return this.playInfo.cover || 'https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/video-cover1.png'
			}
		},
		methods: {
			// 播放
			play() {
				this.isPlay = true;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.yz-box {
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;

		.play-class {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			color: #fff;
			font-size: 88rpx;
		}

		.map-title {
			position: absolute;
			padding: 0 32rpx;
			height: 64rpx;
			top: 32rpx;
			left: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			transform: translateX(-50%);
			font-size: 28rpx;
			z-index: 10;
			color: #fff;
			font-weight: bold;
			border-radius: 32rpx;
			white-space: nowrap;
		}
	}
</style>
